<template>
  <div class="goods-comment-container"
       :class="isShare?'borderRadius':''">
    <div class="goods-box">
      <van-card :desc="goodsInfo.sku_id"
                :title="goodsInfo.title"
                :thumb="goodsInfo.is_compress==1?goodsInfo.pic_url+'160x160':goodsInfo.pic_url"
                :thumb-link="goodsInfo.link">
        <div slot="tags"
             class="goods-bottom">
          <div class="price-num clearfix">
            <div class="price fl"
                 v-html="scaleGoodsPriceFn(goodsInfo.total_price)"></div>
            <span class="fr num">x{{goodsInfo.num}}</span>
          </div>
        </div>
      </van-card>
    </div>
    <!-- $type neq 'add' AND empty($share) -->
    <div class="describe-evaluate"
         v-if="type!='add' && !isShare">
      <span class="label">描述相符</span>
      <van-rate v-model="formData.describe_star"
                :size="17"
                gutter="8"
                color="#FFBF35"
                void-icon="star-o"
                void-color="#B3B3B3" />
      <span class="star-desc" v-if="formData.describe_star>0 && formData.describe_star<=2">差</span>
      <span class="star-desc" v-else-if="formData.describe_star>=5">非常好</span>
    </div>
    <!-- <form action='{:C("MOB_UPLOAD_URL")}{:U("/User/comment?id=$order_item_id&type=$type")}' method="post" id="form1" enctype="multipart/form-data" > -->
    <form class="form1">
      <section class="evaluate-text">
        <textarea name="detail"
                  id="comment"
                  placeholder="宝贝满足你的期待吗?说说它的优点和美中不足的地方吧"
                  v-if="isShare"
                  disabled>{{jsapi_title}}</textarea>
        <textarea name="detail"
                  id="comment"
                  placeholder="宝贝满足你的期待吗?说说它的优点和美中不足的地方吧"
                  v-else
                  v-model="formData.detail"></textarea>
      </section>
      <!-- 晒单分享页面 -->
      <section class="evaluate-img evaluate-img-share"
               v-if="isShare">
        <ul class="clearfix">
          <li v-for="(imgItem,index) in mevaluateImg"
              :key="index"
              class="fl">
            <img :src="imgItem"
                 width="60"
                 height="60"
                 style="display: block;">
          </li>
        </ul>
        <!-- <span class="fi-help-text"></span> -->
      </section>
      <section class="evaluate-img evaluate-img-upload clearfix" v-else>
        <SmallUploadImg ref="smallUploadImg"></SmallUploadImg>

        <!-- <li class="show_li"><input type="file" name="file[]" class="j-uploadimg"><img src=""><b>添加图片</b><div><img src="/PublicMob/images/gicon_del.png" alt=""></div></li>
          <li><input type="file" name="file[]" class="j-uploadimg"><img src=""><b>添加图片</b><div><img src="/PublicMob/images/gicon_del.png" alt=""></div></li>
          <li><input type="file" name="file[]" class="j-uploadimg"><img src=""><b>添加图片</b><div><img src="/PublicMob/images/gicon_del.png" alt=""></div></li>
          <li><input type="file" name="file[]" class="j-uploadimg"><img src=""><b>添加图片</b><div><img src="/PublicMob/images/gicon_del.png" alt=""></div></li>
          <li><input type="file" name="file[]" class="j-uploadimg"><img src=""><b>添加图片</b><div><img src="/PublicMob/images/gicon_del.png" alt=""></div></li> -->
      </section>
      <section v-if="type!='add' && !isShare">
        <section class="anonymity clearfix">
          <van-checkbox v-model="formData.is_anonymous"
                        icon-size="15px"
                        checked-color="#F30C23"
                        class="fl">
            匿名</van-checkbox>
          <b class="anonymity-tip fr">你写的评价会以匿名形式展示</b>
        </section>
        <section class="shop-evaluate">
          <div class="shop-evaluate-top">
            <span class="shop-icon"><img src="https://img.wifenxiao.com/h5-wfx/images/commentList/icon_shop.png"
                   alt=""></span>
            <b class="title">店铺评分</b>
          </div>
          <section class="describe-evaluate">
            <span class="label">物流服务</span>
            <van-rate v-model="formData.logistics_star"
                      :size="17"
                      gutter="8"
                      color="#FFBF35"
                      void-icon="star-o"
                      void-color="#B3B3B3" />
            <span class="star-desc" v-if="formData.logistics_star>0 && formData.logistics_star<=2">差</span>
            <span class="star-desc" v-else-if="formData.logistics_star>=5">非常好</span>
          </section>
          <section class="describe-evaluate">
            <span class="label">服务态度</span>
            <van-rate v-model="formData.service_star"
                      :size="17"
                      gutter="8"
                      color="#FFBF35"
                      void-icon="star-o"
                      void-color="#B3B3B3" />
            <span class="star-desc" v-if="formData.service_star>0 && formData.service_star<=2">差</span>
            <span class="star-desc" v-else-if="formData.service_star>=5">非常好</span>
          </section>
        </section>
        <!-- <input type="hidden" name="describe_star" value="0">
        <input type="hidden" name="logistics_star" value="0">
        <input type="hidden" name="service_star" value="0">
        <input type="hidden" name="is_anonymous" value="0"> -->
      </section>
      <section class="msettlement-but"
               v-if="isShare">
        <button type="button"
                class="butorange-btn red-gra-btn"
                style="background-color: #00B01D;"
                @click="clickShare">立即分享</button>
      </section>
      <section class="msettlement-but"
               v-else>
        <button type="button"
                class="butorange red-gra-btn"
                @click="clickSubmit">提交评价</button>
      </section>
    </form>
    <share-image ref="shareImage"></share-image>
  </div>
</template>

<script>
import Vue from 'vue'
import shareImage from '@/components/wxShare/shareImage'
import { getCommentInfo, commentDo } from '@/api/user/member/memberApi'
import { validLength } from '@/utils/validate.js'
import { scaleGoodsPrice } from '@/utils/index.js'
import UploadImg from '@/components/UploadImg'
import { Card, Rate, Checkbox, CheckboxGroup } from 'vant'


import SmallUploadImg from '@/components/SmallUploadImg'
import { openPage } from '@/utils/utils'

Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Card)
Vue.use(Rate)
export default Vue.extend({
  name: 'index',
  components: {
    UploadImg,
    shareImage,
    SmallUploadImg
  },
  data() {
    return {
      query: '',
      type: '', // 评价和追评
      detailType: '', // evaluate评价晒单，share分享晒单,price原价晒单
      isShare: '',
      jsapi_title: '',
      goodsInfo: {
        // is_compress: 0,
        // pic_url: 'http://img.wifenxiao.com/16/79/6/2019-11/5dc4d6812c64b.jpg@!80x80',
        // title: '商品商品名称商品名称商品名称商品名称商品名称名称',
        // sku_id: '白色 S',
        // total_price: '22.33',
        // num: '2',
        // link: ''
      },
      mevaluateImg: [
        // 'http://img.wifenxiao.com/16/79/6/2019-11/5dc4d6812c64b.jpg@!80x80', 'http://img.wifenxiao.com/16/79/6/2019-11/5dc4d6812c64b.jpg@!80x80'
      ],
      formData: {
        id: '',
        pic_urls: [],
        describe_star: 0,
        logistics_star: 0,
        service_star: 0,
        detail: '',
        is_anonymous: false
      }
    }
  },
  methods: {
    init(params) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getCommentInfo(params).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.goodsInfo = res.data.lists
          this.isShare = res.data.share
          if (res.data.share == 1) {
            this.mevaluateImg = res.data.arr_img
          }
          this.jsapi_title = res.data.jsapi_title
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // uploadImg 抛出的图片参数
    uploadImgListIssue(val) {
      const arr = []
      val.forEach((item) => {
        arr.push(item.content)
      })
      this.formData.pic_urls = arr
    },
    // 点击立即分享
    clickShare() {
      this.$refs.shareImage.showShade = true
    },
    // 点进提交评价
    clickSubmit() {
      if (!validLength(this.formData.detail)) {
        this.$Error('评价内容不能为空')
        return false
      }
        this.formData.pic_urls = this.$refs.smallUploadImg.imgList
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      commentDo(this.formData).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('提交成功')
            wx.navigateBack({
              delta: 1
            })
        } else {
          this.$Error(res.msg)
        }
      })
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    }
  },
  created() {
    this.query = this.$route.query
    if (this.query.type == 'add') {
      this.type = 'add'
      this.formData.type = 'add'
    }
    if (this.query.detailType == 'share') {
      this.detailType = 'share'
    } else if (this.query.detailType == 'price') {
      this.detailType = 'price'
    } else {
      this.detailType = 'evaluate'
    }
    if (this.query.share == 1) {
      this.isShare = 1
    }
    const id = this.query.itemId
    this.formData.id = this.query.itemId
    const params = {
      id,
      type: this.detailType,
      share: this.isShare
    }
    this.init(params)
  }
})
</script>

<style lang="scss">
.goods-comment-container {
  width: 700px;
  margin: 20px auto;
  &.borderRadius {
    border-radius: 20px;
    overflow: hidden;
  }
  .goods-box {
    border-radius: 20px 20px 0 0;
    background: #fff;
    overflow: hidden;
    .num {
      font-size: 24px;
    }
  }
  .van-image__img {
    border-radius: 8px;
  }
  .van-card__desc {
    margin: 8px 0;
  }
  .describe-evaluate {
    padding: 20px;
    background: #fff;
    .label {
      font-size: 28px;
      vertical-align: 6px;
      margin-right: 14px;
    }
    .van-rate {
      margin-left: 8px;
    }
    .star-desc{
      display:inline-block;
      margin-left:16px;
      vertical-align:6px;
      font-size:28px;
      color:#F30C23;
    }
    // .van-rate__item:not(:last-child){
    //   padding-right:16px;
    // }
  }
  .form1 {
  }
  .evaluate-text {
    padding: 0 20px;
    background: #fff;
    textarea {
      width: 100%;
      padding: 27px 29px;
      background: #fafafa;
      height: 210px;
      border-radius: 10px;
      border: 0;
      resize: none;
      font-size: 26px;
      color: #999999;
      &:disabled {
        padding: 10px 20px;
        background: #fafafa;
      }
    }
  }
  .evaluate-img {
    overflow: inherit;
    padding: 25px 20px;
    background: #fff;
    &.evaluate-img-share {
      li {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        margin: 0 10px 10px 0;
        overflow: hidden;
      }
    }
    .van-uploader__preview {
      width: 116px;
      height: 116px;
      border-radius: 8px;
      margin: 0 20px 0 0;
      &:last-child {
        margin-right: 0;
      }
    }
    .van-uploader__upload,
    .van-uploader__preview-image {
      width: 116px;
      height: 116px;
      border-radius: 8px;
      background: #fff;
    }
    .van-uploader__upload {
      background: url("https://img.wifenxiao.com/h5-wfx/images/commentList/upload_camera.png") center
        20px no-repeat;
      background-size: 50px;
      border: 2px dashed #b6b6b6;
      margin: 0;
      .van-uploader__upload-icon {
        margin-top: 20px;
        &::before {
          content: "添加图片";
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }
  .anonymity {
    padding: 0 20px 30px;
    border-radius: 0 0 20px 20px;
    background: #fff;
    img {
      width: 40px;
      height: 40px;
    }
    .van-checkbox__icon .van-icon {
      margin-top: 1px;
      border: 2px solid #666666;
    }
    .van-checkbox__label {
      color: #666666;
      font-size: 28px;
      margin-left: 10px;
      vertical-align: -4px;
    }
    .anonymity-tip {
      line-height: 40px;
      color: #999;
      font-size: 24px;
      font-weight: normal;
    }
  }
  .shop-evaluate {
    padding: 10px 0;
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    .shop-evaluate-top {
      padding: 20px;
    }
    .shop-icon {
      width: 30px;
      height: 30px;
      img {
        width: 30px;
      }
    }
    .title {
      font-size: 28px;
      color: #333333;
      margin-left: 6px;
      vertical-align: 5px;
    }
    .describe-evaluate {
      width: 100%;
      padding: 20px;
      overflow: hidden;
      .van-rate__item:not(:last-child) {
        padding-right: 40px;
      }
    }
  }
  .msettlement-but {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 11px 25px;
    background: #fff;
    button {
      display: block;
      width: 100%;
      height: 76px;
      line-height: 76px;
      text-align: center;
      border-radius: 80px;
      color: #fff;
      font-size: 32px;
      font-weight: normal;
      border: 0;
    }
  }
}
</style>
